<template>
  <CustomDialog
    title="新增/编辑园区"
    width="1100px"
    height="100vh"
    :visible.sync="isShowDialog"
    @closed="handleCloseDialog"
  >
    <!-- :destroy-on-close="true" -->
    <!-- 选择租户 -->
    <!-- <div class="w-1/2 flex mb-4">
      <el-select
        v-model="parkId"
        :disabled="type === 2"
        filterable
        class="w-full"
        placeholder="请选择租户"
      >
        <el-option
          v-for="item in customerOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div> -->

    <div class="bg-white rounded-content-wrap">
      <el-tabs v-model="activeName" class="h-full">
        <el-tab-pane
          v-for="item in tabList"
          :key="item.name"
          :label="item.label"
          :name="item.name"
          lazy
        >
          <component :is="item.name" :park-id="parkId"></component>
        </el-tab-pane>
      </el-tabs>
    </div>
  </CustomDialog>
</template>

<script lang="ts">
import Vue from 'vue'
import BaseInfo from './BaseInfo/index.vue'
import CustomDialog from '@/components/admin/manage/carrier/common/CustomDialog/index.vue'
import { ActionsType as PortalActionsType, MutationsType } from '@/actions/portal'
export default Vue.extend({
  components: {
    CustomDialog,
    BaseInfo,
    ParkInfo: () => import('./ParkInfo/index.vue'),
    IndustryInfo: () => import('./IndustryInfo/index.vue'),
    IndustrySupport: () => import('./IndustrySupport/index.vue'),
    ProductionCost: () => import('./productionCost/index.vue'),
    RecommendProject: () => import('./RecommendProject/index.vue'),
    PreferredResources: () => import('./PreferredResources/index.vue'),
  },
  data() {
    return {
      type: 1, // 1: 新增 2: 编辑
      isShowDialog: false, // 弹框状态
      parkId: null,
      activeName: 'BaseInfo',
      tabList: [
        {
          label: '基本信息',
          name: 'BaseInfo',
        },
        {
          label: '园区概况',
          name: 'ParkInfo',
        },
        {
          label: '产业情况',
          name: 'IndustryInfo',
        },
        {
          label: '产业配套',
          name: 'IndustrySupport',
        },
        {
          label: '生产成本',
          name: 'ProductionCost',
        },
        {
          label: '招商项目',
          name: 'RecommendProject',
        },
        {
          label: '优选资源',
          name: 'PreferredResources',
        },
      ],
    }
  },

  methods: {
    open(type: number = 1, parkId?: string) {
      // @ts-ignore
      this.type = type
      // @ts-ignore
      this.isShowDialog = true

      if (type === 2 && parkId) {
        this.parkId = parkId
        // @ts-ignore
        this.fetchData()
      }
    },

    fetchData() {
      this.$store.dispatch(PortalActionsType.getPortalById, this.parkId)
    },

    // created() {
    //   this.fetchData()
    // },

    handleCloseDialog() {
      this.parkId = ''
      this.$store.commit(MutationsType.SET_PORTAL, {})
      this.$emit('onRefresh')
    },
  },
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/form.scss';

::v-deep .el-tabs__item {
  @apply text-main-content;
}

::v-deep .el-tabs__item.is-active {
  @apply text-main-title;
  @apply font-semibold;
}

::v-deep .el-tabs__header {
  @apply m-0;
}

::v-deep .el-tabs__content,
.el-tab-pane {
  height: calc(100% - 10px) !important;
}
</style>
